<template>
  <div class="about">
    <div class="adiv tittle">
      <!-- <el-input v-model="tittle" placeholder="请填写文章标题"></el-input> -->
      <el-input placeholder="请输入内容" v-model="tittle">
          <template slot="prepend">标题</template>
        </el-input>
    </div>
    <!-- <div class="adiv tittle">
      <el-select v-model="articleType" placeholder="请选择文章类别">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </div> -->

    <div class="adiv tag">


 <el-link href="#" target="_blank">文章类别：</el-link>
      <el-select class="left" v-model="articleType" placeholder="请选择文章类别">
        <el-option label="请选择文章类别" value="0"></el-option>
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>

 <el-link href="#" target="_blank">文章标签：</el-link>
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput"
        >+ New Tag</el-button
      >
    </div>
    <div class="adiv content"><vEditor :content="content"></vEditor></div>

    <el-row class="booter">
      <el-button type="primary" icon="el-icon-s-promotion" round
        >发布</el-button
      >
      <el-button type="success" icon="el-icon-document-remove" round
        >保存至草稿箱</el-button
      >
      <el-button type="info" icon="el-icon-close" round>取消</el-button>
    </el-row>
  </div>
</template>

<script>
import vEditor from "@/components/Editor";

export default {
  name: "About",
  data() {
    return {
      msg: "文章标题",
      tittle: "",
      content: "",
      articleType:'',
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
    };
  },
  components: {
    vEditor,
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    updateCopntent(c) {
      console.log("a.updateCopntent");
      this.content = c;
    },
  },
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.about {
  width: 80%;
  height: auto;
  margin: 5em auto;
  border-radius: 1em;
  background-color: #ffffff;
}

.adiv {
  width: 95%;
  height: auto;
  margin: 2em auto;
  border-radius: 0.5em;
  /* background-color: silver; */
}

.tittle {
  height: 4em;
  line-height: 4em;
}

.tag {
  padding-top: 1em;
  padding-bottom: 1em;
  border: solid 0.1em #e9eef3;
}

.booter {
  margin: 5em auto;
  padding-bottom: 5em;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
